<template>
  <div class="messageCustom beautify-scroll-def">
    <!-- 初始化内容 -->
    <template v-if="message.data && message.data.type === 'init'">
      <div id="u44_text" class="text">
        <p style="line-height: 20px">
          <span style="color: #f2f2f2"
            >您好！我是小李识才 AI 智能助手，能帮助您实现专家智能推荐、专家数据可视化、辅助决策与风险预警、政策推送与适配建议等功能。以下是我的常用能力指令示例，帮助您快速上手，欢迎尝试~</span
          >
        </p>
        <template v-for="item in initList" :key="item.title">
          <p style="line-height: 14px">
            <span style="color: #ffffff">{{item.title}}</span>
          </p>
          <p style="line-height: 14px" v-for="item2 in item.children" :key="item2.name">
            <span style="color: #f2f2f2">&nbsp;&nbsp; &nbsp;&nbsp; </span>
            <a @click="onClick(item2.name)" style="color: #02a7f0; cursor: pointer"
              >{{item2.name}}</a
            >
          </p>
        </template>
      </div>
    </template>

    <template v-else-if="!isObject(props.message.content)">
      <div>
        {{props.message.content}}
      </div>
    </template>

    <template v-else-if="isObject(props.message.content)">
      <p v-if="props.message.content.content">
        {{props.message.content.content}}
      </p>
      <div v-if="props.message.content.list.length">
        <Table :data="props.message.content.list" :columns="props.message.content.columns" />
      </div>
     

      <!-- 描述 -->
      <div v-if="props.message.content.descriptions.length" class="contetn_rightonetop beautify-scroll-def">
        <el-descriptions :column="1" v-for="item1 in props.message.content.descriptions" :title="item1.title ? '【' + item1.title + '】': ''" :key="item1.title">
          <el-descriptions-item v-for="item in item1.children" :key="item.label" :label="item.label + ':'">
            <template #default>
              {{item.value || '-'}}
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-if="props.message.content.personList.length">
        <p style="line-height: 16px" v-for="item in props.message.content.personList" :key="item.name">
            <span style="color: #f2f2f2">&nbsp;&nbsp; &nbsp;&nbsp; </span>
            <a @click="onClick(item.name)" style="color: #02a7f0; cursor: pointer"
              >{{item.name}}</a
            >
          </p>
      </div>

       <div v-if="props.message.content.chart.data.length">
        <Chart :dataObj="props.message.content.chart" />
      </div>
    </template>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { ElInput, ElButton, ElIcon } from "element-plus";
import { Position } from "@element-plus/icons-vue";
import { aiApi } from "@/api";
// import ChatStore from "";
import type { Message } from "../types/index";
import { useChatStore } from "@/stores/chat.ts";
import Table from "./MessageComponents/Table";
import Chart from "./MessageComponents/Chart";

const settingStore = useChatStore();
const { sendMessageClick, receiveMessage } = settingStore
const props = defineProps<{
  message: Message;
}>();
console.log(props.message,'props');

const chatMessages = computed(() => settingStore.messages);

const emit = defineEmits<{
  (e: "send", value: string): void;
}>();

const isObject = (value)=> {
  return typeof value === 'object' && value !== null;
}

const initList = ref([
  {
    title: '1、政策解读类',
    children: [
      {
        name: '小李识才，在专家选聘中，提名制是怎么规定的？'  
      },
      {
        name: '小李识才，专家退出机制有哪些要求？'
      },
      {
        name: '小李识才，公司对专家年度考核的主要指标是什么？'
      },
    ]
  },
  {
    title: '2、数据分析类',
    children: [
      {
        name: '小李识才，目前专家队伍的年龄结构情况如何？'
      },
      {
        name: '小李识才，我们在配网专业和安监专业的专家数量对比如何？'
      },
      {
        name: '小李识才，专家在各区域的分布情况能否做个分析？'
      },
    ]
  },
  {
    title: '3、应用类',
    children: [
      {
        name: '小李识才，如果我们要开展一个配电线路数字化改造项目，应该邀请哪些类型的专家参与？'
      },
      {
        name: '小李识才，在新能源并网项目中，哪些专家最合适参与？'
      },
      {
        name: '小李识才，针对客户服务数字化转型，推荐哪些方向的专家团队？'
      },
    ]
  },
  {
    title: '4、建议类',
    children: [
      {
        name: '小李识才，我们在未来两年的人才储备上应重点关注哪些方向？'
      },
      {
        name: '小李识才，针对专家队伍的年龄结构，如何避免经验断层？'
      },
      {
        name: '小李识才，公司在专家培养方面，下一步应该重点做什么？'
      },
    ]
  },
])
const onClick = (val) => {
  // sendAi(val)
  emit('send', val);
}

const sendAi = async (message: string)=>{
  sendMessageClick(message)
  // if (!message.trim()) return;
  // try {
  //   await useChatStore.sendMessage(message);
  //   await scrollToBottom();
  // }catch (err){
  //   console.error('发送消息失败：',err)
  // }
  // console.log(chatMessages,'chatMessages----');
  
  const res = await aiApi({ message, chatMessages: chatMessages.value })
  if (res.success) {
    receiveMessage(res.data)
  }
  // receiveMessage(res.data)
}

// const inputText = ref('');
// const inputRef = ref<InstanceType<typeof ElInput> | null>(null);

// const placeholder = computed(() => {
//   return props.disabled ? '等待响应中...' : '输入您的问题...';
// });

// const handleEnter = (e: Event | KeyboardEvent) => {
//   // Only send on Enter without shift key
//   if (!(e instanceof KeyboardEvent) || !e.shiftKey && inputText.value.trim()) {
//     handleSend();
//   }
// };

onMounted(() => {
  //   if (inputRef.value && inputRef.value.$el) {
  //     const textarea = inputRef.value.$el.querySelector('textarea');
  //     if (textarea) textarea.focus();
  //   }
});
</script>

<style scoped lang="scss">
.messageCustom {
  // max-height: 800px;

    .contetn_rightonetop {
    height: calc(100% - 66px);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #58b1ff;
      font-size: 18px;
      font-weight: 600;
      line-height: 36px;
    }
    .content {
      font-size: 16px;
      display: flex;
      // align-items: center;
      > div {
        text-align: left;
        line-height: 24px;
      }
      :first-child {
        width: 80px;
      }
      :nth-child(2) {
        width: calc(100% - 80px);
      }
    }
    .descriptions-default-content{
      display: inline-grid;
    }
    .descriptions-click{
      color: #02a7f0;
      text-decoration: underline;
    }

    ::v-deep() {
      .el-descriptions__body{
        background-color: transparent;
      }
      .el-descriptions__label{
        color: white;
        font-weight: 600;
      }
      .el-descriptions__content{
        color: white;
      }
      .el-descriptions__title{
        color: #03a7ef;
      }
    }
  }
}
</style>
